<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>票据管理</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="history-order-mgr">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <el-form :inline="true" label-width="calc(2em + 12px)">
            <el-form-item label="类型">
              <el-select clearable v-model="search.type" style="width:180px" placeholder="请选择类型">
                <el-option v-for="orderType in orderTypeList" :key="`orderType_${orderType.value}`" :value="orderType.value" :label="orderType.label">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单号">
              <el-input v-model="search.fileName" style="width:180px" placeholder="请输入单号"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </search-btn-view>
      <div class="history-order-table-div">
        <el-table fit stripe border :data="orderList" style="width: 100%" height="parent">
          <el-table-column label="单号" prop="fileName" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="类型" prop="type" min-width="100px" align="center">
            <template slot-scope="props">
              <span>{{i18n.getMsg(`productMgr.historyOrderType.${props.row.type}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="打印人员" prop="userName" min-width="140px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="打印时间" prop="userName" width="140px" align="center">
            <template slot-scope="props">
              <span>{{moment(props.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="操作" width="100px" align="center">
            <template slot-scope="props">
              <el-button size="small" type="primary" @click="lookDetail(props.row)">内容</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
    <el-dialog fullscreen class="dialog-fullscreen" title="票据内容" :visible.sync="openDialog" @closed="selectOrder=null">
      <order-detail v-if="openDialog" :order="selectOrder"></order-detail>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/orderDetail.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js"
  ]);

</script>
<script src="./orderDetail.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        type: '',
        fileName: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        orderTypeList: i18n.getDropDown('productMgr.historyOrderType', ["3", "4", "5", "9", "6", "7", "9", "10"]),
        orderList: [],
        openDialog: false,
        selectOrder: null,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        },
        moment: moment,
        i18n: i18n
      };
    },

    created: function () {
      this.setOrderList(true);
    },

    methods: {
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var postData = {
          fileName: search.fileName
        };

        var type = search.type;
        if (type === '') {
          type = '3,4,5,6,7,9,10';
        }
        postData.type = type;

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData.start = start;
        postData.length = pageSize;

        this.loading = true;
        var self = this;
        ajaxRequest('fileManager/getFileListForPage', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var orderList = res.returnData;
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            var createTime = order.createTime;
            order.createTime = moment(createTime).valueOf();
          }

          self.orderList = orderList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange: function () {
        this.setOrderList();
      },

      lookDetail: function (order) {
        this.selectOrder = order;
        this.openDialog = true;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      OrderDetail: OrderDetail
    }
  });

</script>
<style>
  .history-order-mgr {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .history-order-mgr .history-order-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
